<template>
  <div class="param-list">
    <div>
      <label>{{ $t("route.DeviceManager") }}</label>
      <div></div>
      <button>
        <img /><label>{{ $t("route.Equipment_parameters") }}</label>
      </button>
      <div>
        <label>{{ $t("route.kind") }}：{{ device.kind }}</label>
        <label>{{ $t("route.type") }}：{{ device.typeNum }}</label>
        <label>{{ $t("route.Head_Model") }}：{{ device.noseCode }}</label>
        <label>{{ $t("route.Serial") }}：{{ device.serialNum }}</label>
      </div>
    </div>
    <div class="flex-column">
      <div style="width: 100%">
        <el-radio-group style="float: right" v-model="groupName">
          <el-radio-button
            v-for="item in groupList"
            :label="item.groupName"
          ></el-radio-button>
        </el-radio-group>
      </div>

      <el-table :data="paramList" max-height="700px" style="width: 100%">
        <el-table-column prop="code" :label="$t('route.Parameter_number')" />
        <el-table-column prop="name" :label="$t('route.Parameter_name')" />
        <el-table-column prop="defValue" :label="$t('route.Parameter_value')" />
        <el-table-column prop="name" :label="$t('route.Parameter_name')" />
        <el-table-column :label="$t('route.operate')">
          <template #default="scope">
            <el-button @click="updateClick(scope.row)" type="text">{{
              $t("route.modify")
            }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog v-model="dialogVisible" width="30%">
      <div style="font-size: 20px">{{ dialogTitle }}</div>
      <el-radio-group v-model="paramValue">
        <el-radio v-for="item of valueRangeList" :label="item.value">{{
          item.name
        }}</el-radio>
      </el-radio-group>
      <div>
        <el-button @click="confirmClick" style="width: 100%">{{
          $t("route.sure")
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import http from "../../js/http/http.js";
import api from "../../js/http/api.js";
import CommonUtils from "../../js/common/common-utils.js";
import HLUtils from "../../js/common/hl-utils.js";
import { ElMessageBox } from "element-plus";
import NumberUtils from '../../js/common/number-utils.js'
import ParamCmdUtils from '../../js/common/param-utils.js'
export default {
  data() {
    return {
      device: {},
      groupList: [],
      groupName: null,
      paramList: [],
      defaultParamList: [],
      dialogVisible: false,
      valueRangeList: [],
      selParam: null,
      paramValue: -1,
      dialogTitle: null,
    };
  },
  methods: {
    getParamGroup() {
      http.post(
        api.GET_PARAM_GROUP,
        {
          code: this.device.paramCode,
        },
        (data) => {
          this.groupList = data.data;
          this.groupName = this.groupList[0].groupName;
        }
      );
    },
    confirmClick() {
      if (this.paramValue == -1) {
        this.$message.error(this.$t("route.Please_select_data"));
        return;
      }
      this.sendCmd(this.paramValue);
      this.dialogVisible = false;
    },
    sendCmd(value) {
      var groupCode = 0;
      for (var item of this.groupList) {
        if (item.groupName == this.groupName) {
          groupCode = item.groupCode;
          break;
        }
      }
      var cmd = ParamCmdUtils.formatCmd(
        this.device.id,
        this.device.paramCode,
        groupCode,
        this.selParam.code,
        value,
        this.selParam.step
      );
      this.sendCmdDevice(cmd, value);
    },
    sendCmdDevice(cmd, value) {
      http.post(
        api.SEND_CMD_DEVICE,
        {
          deviceId: this.device.id,
          cmd: cmd,
        },
        (data) => {}
      );
    },
    updateClick(param) {
      this.selParam = param;
      if (param.valueType == 0) {
        var valueRange = param.valueRange;
        var content =
          this.$t("route.Please_enter_a_value") +
          "(" +
          valueRange.minValue +
          "~" +
          valueRange.maxValue +
          ")(" +
          param.step +
          this.$t("route.Multiple_of");
        ElMessageBox.prompt(content, this.$t("route.modify") + param.name, {
          confirmButtonText: this.$t("route.sure"),
          cancelButtonText: this.$t("route.cancel"),
          inputType: "number",
        }).then(({ value }) => {
          if (value > valueRange.maxValue || value < valueRange.minValue) {
            this.$message.error(
              this.$t("route.Please_enter") +
                "(" +
                valueRange.minValue +
                "~" +
                valueRange.maxValue +
                this.$t("route.Value_in_range")
            );
            return;
          }
          if (
            this.device.typeNum.indexOf("H93") == 0 ||
            this.device.typeNum.indexOf("H89") == 0
          ) {
            if (this.selParam.code >= 62 && this.selParam.code <= 68) {
              value = parseInt(value) + 100;
            }
          }
          this.sendCmd(value);
        });
      } else {
        this.dialogTitle = this.$t("route.modify") + param.name;
        this.dialogVisible = true;
        this.valueRangeList = param.valueRange;
      }
    },
    adjustVregClick() {
      http.post(
        api.SEND_CMD_DEVICE,
        {
          deviceId: this.device.id,
          cmd: "5A534D0200100000006000004D",
        },
        (data) => {
          this.$message.success(this.$t("route.Successfully_distributed"));
        }
      );
    },

    getDefaultParam() {
      http.post(
        api.GET_DEFAULT_PARAM,
        {
          paramCode: this.device.paramCode,
        },
        (data) => {
          this.defaultParamList = data.data;
        }
      );
    },

    getParamValue() {
      var groupCode = 0;
      for (var item of this.groupList) {
        if (item.groupName == this.groupName) {
          groupCode = item.groupCode;
          break;
        }
      }
      http.post(
        api.GET_PARAM_VALUE,
        {
          deviceId: this.device.id,
          type: groupCode,
        },
        (data) => {
          this.paramList = [];
          if (!CommonUtils.isEmpty(data.data)) {
            var valueList = CommonUtils.hexStringToBytes(data.data.valueList);
            for (var item of this.defaultParamList) {
              if (this.device.paramCode == 0) {
                if (item.group == this.groupName) {
                  item.defValue = valueList[item.code - data.data.startIndex] * item.step;
                  this.paramList.push(item);
                }
              } else if (this.device.paramCode == 7) {
                if (item.group == this.groupName) {
                  var strIndex = item.code * 4 - data.data.startIndex * 4;
                  if (strIndex + 4 <= valueList.length) {
                    var value = NumberUtils.toUint32(
                      valueList.slice(strIndex, strIndex + 4)
                    );
                    item.defValue = value * item.step;
                    this.paramList.push(item);
                  }
                }
              } else {
                if (item.group == this.groupName) {
                  var strIndex = item.code * 2 - data.data.startIndex * 2;
                  if (strIndex + 2 <= valueList.length) {
                    var value = NumberUtils.toUint16(
                      valueList.slice(strIndex, strIndex + 2)
                    );
                    item.defValue = value * item.step;
                    this.paramList.push(item);
                  }
                }
              }
            }
          }
          this.getParamValueTimeout();
        },
        (errorData) => {
          this.getParamValueTimeout();
        }
      );
    },
    getParamValueTimeout() {
      if (this.isDestory) return;
      setTimeout(() => {
        this.getParamValue();
      }, 1000);
    },
  },
  created() {
    this.device = JSON.parse(CommonUtils.getParam(this, "device", "setDevice"));
    this.getParamGroup();
    this.getDefaultParam();
    this.getParamValue();
  },
  unmounted() {},
};
</script>
<style lang="scss" scoped>
.param-list {
  color: #444444;
  font-size: 18px;
  padding-right: 20px;
  height: calc(100vh - 100px);
  // overflow: scroll;
  scrollbar-width: none;
  /* firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;

  > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 20px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 5px;
  }

  > div:nth-of-type(1) {
    > label:nth-of-type(1) {
      font-weight: 600;
    }

    > div:nth-of-type(1) {
      width: 1px;
      background-color: #cccccc;
      height: 15px;
      margin: 0px 20px;
    }

    > button:nth-of-type(1) {
      background-image: url(../../assets/img/customer-1.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding: 5px 10px;
      border: 0px;
      display: flex;
      color: #ffffff;
      flex-direction: row;
      align-items: center;
      font-weight: 800;

      > img {
        margin-right: 7px;
        width: 15px;
        height: 15px;
        content: url(../../assets/img/customer-2.png);
      }
    }

    > div:nth-of-type(2) {
      text-align: right;
      font-size: 16px;
      flex: 1;
      color: #777777;

      > label {
        margin: 0px 10px;
      }
    }
  }

  .value-item {
    padding: 10px 20px;
  }
  .flex-column {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
  }
}
</style>
